<template>
    <div class="app-container">
       <a-button type="primary" @click="resolveData" icon="search">测试</a-button>
          <div id="visit-count-chart" style="width: 100%;height: 370px" />
    </div>
</template>
<script>
import echarts from 'echarts'
import resize from '@/components/Charts/mixins/resize'
 export default {
    name: "echartui",
    mixins: [resize],
    data() {
      return {
        chart: null
      }
    },
    created() {
      const _this = this;
       _this.$nextTick(() => {
          // _this.resolveIcon();
           _this.resolveUi();
            _this.$nextTick(() => {
              _this.resolveData();
            });
       });
    },
    methods: {
      resolveData() {
         let optionData = {
                xAxis: {
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                series: [{
                    data: [820, 932, 901, 934, 1290, 1330, 1320]
                }]
            };
            this.chart.setOption(optionData)
      },
      resolveUi() {
           this.chart = echarts.init(document.getElementById('visit-count-chart'))
           let option = {
                xAxis: {
                    type: 'category',
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    type: 'line',
                    smooth: true
                }]
            };
           this.chart.setOption(option)
      },
      resolveIcon() {
           this.chart = echarts.init(document.getElementById('visit-count-chart'))

           let option = {
                xAxis: {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data: [820, 932, 901, 934, 1290, 1330, 1320],
                    type: 'line',
                    smooth: true
                }]
            };
           this.chart.setOption(option)
      },
    }
 }
</script>